<template>
	<view class="container">
		<view class="background">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
			<view class="circle circle-3"></view>
		</view>

		<scroll-view class="scroll-container" scroll-y="true">
			<view class="form-card">
				<view class="form-header">
					<text class="title">用户注册</text>
					<text class="subtitle">创建您的个人账号</text>
				</view>

				<view class="form-content">
					<view class="input-group">
						<view class="input-item">
							<text class="input-icon">👤</text>
							<input class="input" v-model="form.name" placeholder="请输入真实姓名"
								placeholder-class="placeholder" maxlength="17" />
							<view class="input-clear" v-if="form.name" @click="form.name = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">🎂</text>
							<input class="input" v-model="form.birthYear" type="number" placeholder="请输入出生年份"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.birthYear" @click="form.birthYear = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">📱</text>
							<input class="input" v-model="form.mobile" type="number" placeholder="请输入手机号"
								placeholder-class="placeholder" maxlength="11" />
							<view class="input-clear" v-if="form.mobile" @click="form.mobile = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">📧</text>
							<input class="input" v-model="form.email" placeholder="请输入邮箱（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.email" @click="form.email = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">🏠</text>
							<input class="input" v-model="form.address" placeholder="请输入地址（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.address" @click="form.address = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">✏️</text>
							<input class="input" v-model="form.intro" placeholder="个人简介（选填）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.intro" @click="form.intro = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">🆔</text>
							<input class="input" v-model="form.loginAccount" placeholder="请设置登录账户"
								placeholder-class="placeholder" maxlength="20" />
							<view class="input-clear" v-if="form.loginAccount" @click="form.loginAccount = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">🔒</text>
							<input class="input" v-model="form.loginPwd" password placeholder="请设置密码（至少6位）"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.loginPwd" @click="form.loginPwd = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>

						<view class="input-item">
							<text class="input-icon">✅</text>
							<input class="input" v-model="form.confirmPwd" password placeholder="请确认密码"
								placeholder-class="placeholder" />
							<view class="input-clear" v-if="form.confirmPwd" @click="form.confirmPwd = ''">
								<text class="clear-icon">×</text>
							</view>
						</view>
					</view>

					<view class="form-tips">
						<view class="tip-item" v-if="form.name && (form.name.length < 2 || form.name.length > 17)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">姓名需2-17个字符</text>
						</view>
						<view class="tip-item"
							v-if="form.birthYear && (form.birthYear < 1950 || form.birthYear > maxBirthYear)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">出生年份需在1950-{{maxBirthYear}}之间</text>
						</view>
						<view class="tip-item" v-if="form.mobile && !isValidMobile(form.mobile)">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">请输入有效的手机号</text>
						</view>
						<view class="tip-item" v-if="form.loginPwd && form.loginPwd.length < 6">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">密码至少6位</text>
						</view>
						<view class="tip-item"
							v-if="form.loginPwd && form.confirmPwd && form.loginPwd !== form.confirmPwd">
							<text class="tip-icon">⚠️</text>
							<text class="tip-text">两次密码不一致</text>
						</view>
					</view>

					<view class="agreement">
						<label class="agreement-item" @click="agreed = !agreed">
							<view class="checkbox-container" :class="{checked: agreed}">
								<text class="checkbox-icon" v-if="agreed">✓</text>
							</view>
							<text class="agreement-text">我已阅读并同意</text>
							<text class="agreement-link">《用户协议》</text>
							<text class="agreement-text">和</text>
							<text class="agreement-link">《隐私政策》</text>
						</label>
					</view>

					<button class="register-btn" type="primary" @click="handleRegister" :disabled="!agreed || loading">
						<text class="btn-text">{{ loading ? '注册中...' : '注册' }}</text>
					</button>

					<view class="link-group">
						<text class="link-text">已有账号?</text>
						<navigator url="/pages/Login/Login" open-type="redirect" class="link">立即登录</navigator>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			const currentYear = new Date().getFullYear();
			return {
				form: {
					name: '', 
					birthYear: '', 
					mobile: '', 
					email: '', 
					address: '', 
					intro: '', 
					loginAccount: '', 
					loginPwd: '', 
					confirmPwd: '' 
				},
				maxBirthYear: currentYear - 5,
				agreed: false,
				loading: false
			}
		},
		methods: {
			isValidMobile(mobile) {
				const reg = /^1[3-9]\d{9}$/
				return reg.test(mobile)
			},

			validateForm() {
				const {
					name,
					birthYear,
					mobile,
					loginAccount,
					loginPwd,
					confirmPwd
				} = this.form

				if (!name || !birthYear || !mobile || !loginAccount || !loginPwd) {
					uni.showToast({
						title: '请填写完整必填信息',
						icon: 'none'
					})
					return false
				}

				if (name.length < 2 || name.length > 17) {
					uni.showToast({
						title: '姓名需2-17个字符',
						icon: 'none'
					})
					return false
				}

				const year = parseInt(birthYear)
				if (isNaN(year) || year < 1950 || year > this.maxBirthYear) {
					uni.showToast({
						title: `出生年份需在1950-${this.maxBirthYear}之间`,
						icon: 'none'
					})
					return false
				}

				if (!this.isValidMobile(mobile)) {
					uni.showToast({
						title: '请输入有效的手机号',
						icon: 'none'
					})
					return false
				}

				if (loginAccount.length < 2 || loginAccount.length > 20) {
					uni.showToast({
						title: '登录账户需2-20个字符',
						icon: 'none'
					})
					return false
				}

				// 6. 密码验证
				if (loginPwd.length < 6) {
					uni.showToast({
						title: '密码长度至少6位',
						icon: 'none'
					})
					return false
				}

				// 7. 确认密码验证
				if (loginPwd !== confirmPwd) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					})
					return false
				}

				// 8. 协议同意验证
				if (!this.agreed) {
					uni.showToast({
						title: '请同意用户协议和隐私政策',
						icon: 'none'
					})
					return false
				}

				return true
			},

			// 注册处理
			async handleRegister() {
				if (!this.validateForm()) {
					return
				}

				this.loading = true

				try {
					const res = await uniCloud.callFunction({
						name: 'register',
						data: {
							name: this.form.name,
							birthYear: parseInt(this.form.birthYear),
							mobile: this.form.mobile,
							email: this.form.email || '',
							address: this.form.address || '',
							intro: this.form.intro || '',
							loginAccount: this.form.loginAccount,
							loginPwd: this.form.loginPwd
						}
					})

					const {
						code,
						msg
					} = res.result
					if (code === 200) {
						uni.showToast({
							title: msg || '注册成功',
							icon: 'success',
							duration: 2000
						})

						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/Login/Login'
							})
						}, 1500)
					} else {
						uni.showToast({
							title: msg || '注册失败',
							icon: 'none'
						})
					}

				} catch (error) {
					console.error('注册失败：', error)
					uni.showToast({
						title: '注册失败，请稍后重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			}
		}
	}
</script>

<style>
	.container {
		height: 100vh;
		background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.background {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.circle {
		position: absolute;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.15);
	}

	.circle-1 {
		width: 400rpx;
		height: 400rpx;
		top: -150rpx;
		right: -150rpx;
		background: rgba(255, 255, 255, 0.1);
	}

	.circle-2 {
		width: 300rpx;
		height: 300rpx;
		bottom: 80rpx;
		left: -100rpx;
	}

	.circle-3 {
		width: 200rpx;
		height: 200rpx;
		bottom: -50rpx;
		right: 120rpx;
		background: rgba(255, 255, 255, 0.12);
	}

	.scroll-container {
		flex: 1;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 1;
	}

	.form-card {
		background: rgba(255, 255, 255, 0.98);
		border-radius: 30rpx;
		padding: 60rpx 50rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 122, 255, 0.15);
		width: 100%;
		max-width: 700rpx;
		margin: 0 auto;
		border: 1rpx solid rgba(255, 255, 255, 0.2);
		box-sizing: border-box;
	}

	.form-header {
		text-align: center;
		margin-bottom: 50rpx;
	}

	.title {
		display: block;
		font-size: 48rpx;
		font-weight: 700;
		color: #007AFF;
		margin-bottom: 16rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}

	.input-group {
		margin-bottom: 30rpx;
	}

	.input-item {
		display: flex;
		align-items: center;
		background: #f8f9fa;
		border-radius: 16rpx;
		padding: 0 30rpx;
		margin-bottom: 24rpx;
		border: 2rpx solid #e9ecef;
		transition: all 0.3s ease;
		height: 96rpx;
	}

	.input-item:focus-within {
		border-color: #007AFF;
		background: #ffffff;
		box-shadow: 0 0 0 4rpx rgba(0, 122, 255, 0.1);
	}

	.input-icon {
		font-size: 36rpx;
		margin-right: 20rpx;
		color: #007AFF;
		width: 40rpx;
		text-align: center;
		flex-shrink: 0;
	}

	.input {
		flex: 1;
		height: 100%;
		font-size: 30rpx;
		color: #333;
	}

	.placeholder {
		color: #999;
		font-size: 28rpx;
	}

	.input-clear {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background: #e0e0e0;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10rpx;
		flex-shrink: 0;
	}

	.clear-icon {
		font-size: 28rpx;
		color: #666;
		font-weight: bold;
	}
	
	.form-tips {
		margin-bottom: 30rpx;
	}

	.tip-item {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		background: #fff8e1;
		border-radius: 10rpx;
		margin-bottom: 12rpx;
		border-left: 4rpx solid #ffb300;
	}

	.tip-icon {
		font-size: 28rpx;
		margin-right: 12rpx;
		color: #ff9800;
	}

	.tip-text {
		font-size: 24rpx;
		color: #ff6f00;
		flex: 1;
	}

	.agreement {
		margin-bottom: 40rpx;
		padding: 0 10rpx;
	}

	.agreement-item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		padding: 15rpx 0;
	}

	.checkbox-container {
		width: 40rpx;
		height: 40rpx;
		border-radius: 8rpx;
		border: 2rpx solid #ccc;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 15rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;
	}

	.checkbox-container.checked {
		border-color: #007AFF;
		background: #007AFF;
	}

	.checkbox-icon {
		font-size: 28rpx;
		color: #fff;
	}

	.agreement-text {
		font-size: 26rpx;
		color: #666;
		margin-right: 8rpx;
	}

	.agreement-link {
		font-size: 26rpx;
		color: #007AFF;
		font-weight: 500;
		margin: 0 8rpx;
	}

	.register-btn {
		background: linear-gradient(135deg, #007AFF 0%, #00C6FF 100%);
		border: none;
		border-radius: 20rpx;
		height: 96rpx;
		line-height: 96rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #ffffff;
		margin-bottom: 40rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 122, 255, 0.3);
		position: relative;
		overflow: hidden;
	}

	.register-btn[disabled] {
		background: #ccc;
		box-shadow: none;
		opacity: 0.6;
	}

	.btn-text {
		color: #ffffff;
		font-weight: 600;
	}

	.link-group {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 20rpx;
		padding-top: 20rpx;
		border-top: 1rpx solid #eee;
	}

	.link-text {
		font-size: 26rpx;
		color: #666;
	}

	.link {
		font-size: 26rpx;
		color: #007AFF;
		font-weight: 600;
	}
</style>